<template>
  <div class="order-container">
	  <div v-if="!$store.state.token">
      <img src="https://cube.elemecdn.com/5/51/255490294be88d8a2fbb92c5ad1bcgif.gif" width="100%" />
      <p class="view-order">登录后查看外卖订单</p>
      <button class="btn">立即登录</button>
    </div>
    <div v-else>
      <div class="not-orders" v-if="oldOrders.length === 0 &&currentOrders.length === 0">
        <img class="no-records" src="https://fuss10.elemecdn.com/8/c8/bbe5984003cb26fc7b445a4a15195png.png" />
        <p class="no-records-text">近三个月无外卖订单记录</p>
        <p class="more-records">查看三个月前的外卖订单<span class="iconfont icon-xiajiantou_huaban"></span></p>
      </div>
      <div v-else>
        <section class="c-order_item" v-for="(order, index) in currentOrders" :key="index">
          <div class="c-order_info">
            <img-format :src="order.restaurant_image_hash" class="rst-img" />
            <div class="c-order_r">
              <div class="flex-row-sb-center">
                <p class="o-name m0 ellipsis">{{order.restaurant_name}}</p>
                <span class="o-hint">{{order.extra_status.text}}</span>
              </div>
              <p class="o-create_at m0">{{order.formatted_created_at}}</p>
              <div class="flex-row-sb-center rule-info">
                <span>{{order.basket.group[0][0].name}}</span>
                <strong>￥{{order.total_amount}}</strong>
              </div>
            </div>
          </div>
          <div class="order-btn">
            <button v-if="order.status_code === -4" class="order-oper">再来一单</button>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderList, getOrdersStatus } from '@/api/elm-data'
import ImgFormat from '_c/imgFormat/ImgFormat.vue'
export default {
	name: 'order',
	data() {
		return {
      oldOrders: [],
      currentOrders: []
    }
	},
  components: {
    ImgFormat
  },
	async created() {
    if(this.$store.state.token) {
      const userID = window.sessionStorage.getItem('USER_ID')
      const { data } = await getOrderList(userID)
      const { data: res } = await getOrdersStatus({
        userID
      })
      console.log(res)
      this.currentOrders = res
      this.oldOrders = data.orders
    }
	}
}
</script>

<style scoped>
  .order-container {
    width: 100%;
  }
  .view-order {
    font-size: 32px;
    color: #565656;
    text-align: center;
  }
  .btn {
    display: block;
    height: 60px;
    width: 30%;
    margin: 0 auto;
    background-color: #56d176;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 24px;
  }
  .not-orders {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .no-records {
    width: 60%;
    margin-top: 150px;
  }
  .no-records-text {
    font-size: 30px;
    color: #565656;
  }
  .more-records {
    margin-top: 0;
    font-size: 20px;
    color: #a2a2a2;
  }
  .icon-xiajiantou_huaban {
    font-size: 20px;
  }
  .c-order_item {
    padding: 20px;
    background-color: #fff;
  }
  .c-order_info {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #d9d9d9;
  }
  .c-order_r {
    box-sizing: border-box;
    margin-left: 20px;
    width: 100%;
  }
  .o-name {
    font-size: 30px;
    width: 40%;
  }
  .o-hint {
    font-size: 24px;
    color: #666;
  }
  .o-create_at {
    margin-top: 6px;
    padding-bottom: 20px;
    border-bottom: 1px solid #d9d9d9;
    font-size: 22px;
    color: #888;
  }
  .rule-info {
    padding: 20px 0;
    font-size: 26px;
  }
  .order-btn {
    display: flex;
    flex-direction: row-reverse;
    padding: 20px 20px 0;
  }
  .order-oper {
    padding: 10px 20px;
    border: 1px solid #0097FF;
    color: #0097FF;
    background-color: transparent;
    font-size: 26px;
  }
  .rst-img {
    width: 90px;
  }
</style>
